import { customRef } from 'vue';

export default function useMsgRef(initialValue: string, delay: number) {
  let timer: number;
  // customRef,可以控制数据的变化是否触发视图的更新
  // track(跟踪)
  // trigger(触发)
  let msg = customRef((track, trigger) => {
    let value = '';
    return {
      // msg被读取时，会调用track()
      get() {
        track(); //告诉vue这个msg2需要被追踪，持续关注，一旦msg2变了就要去更新视图
        return value;
      },
      set(newValue) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          value = newValue;
          trigger(); //告诉vue这个msg2被修改了
        }, delay)
      }
    }
  })
  return { msg };
}

